<template>
  <div class="main">
    <h3 class="wow" style="visibility: visible">
      <span>100+</span> <span></span>
      <p>别墅大宅设计大咖</p>
    </h3>
    <div class="content">
      <ul>
        <li class="wow" style="visibility: visible">
          <div class="top">
            <div class="topLeft wow" style="visibility: visible">
              <div>
                <p>王伊豪</p>
                <p>设计总监</p>
              </div>
              <div>
                
                <p>只有设计与表现的完美结合才能勾勒出一个全新舒适的家。</p>
                <p>设计理念</p>
              </div>
              <div>
                <p class="year">10年</p>
                <p>从业年限</p>
              </div>
              <div class="button-wrap">
                <div class="btn" @click="visible = true">找TA设计</div>
              </div>
            </div>
            <div class="topRight wow" style="visibility: visible">
              <img
                src="/src/assets/img/image.png"
                @click="toPage('designdetail',1)"
                alt=""
              />
            </div>
          </div>
          <div class="swiper wow" style="visibility: visible">
            <div class="swiperTop">
              <p>出圈作品</p>
              <div>
                <div class="swiper-button-prev prev1"></div>
                <div class="swiper-button-next next1"></div>
              </div>
            </div>
            <swiper
              slidesPerView="2"
              :space-between="-80"
              :navigation="navigation"
              :modules="modules"
              @slideChange="onSlideChange"
              class="swiper-container"
            >
              <swiper-slide>
                <div class="imgBox">
                  <img
                    src="https://www.shbotao.net//uploads/allimg/20230328/175b44e400dd1f37cbcbb74423474642.jpg"
                    alt=""
                  />
                </div>
                <p>佘山玺越</p>
              </swiper-slide>
              <swiper-slide>
                <div class="imgBox">
                  <img
                    src="https://www.shbotao.net//uploads/allimg/20230328/175b44e400dd1f37cbcbb74423474642.jpg"
                    alt=""
                  />
                </div>
                <p>佘山玺越</p>
              </swiper-slide>
              <swiper-slide>
                <div class="imgBox">
                  <img
                    src="https://www.shbotao.net//uploads/allimg/20230328/175b44e400dd1f37cbcbb74423474642.jpg"
                    alt=""
                  />
                </div>
                <p>佘山玺越</p>
              </swiper-slide>
            </swiper>
          </div>
        </li>
        
      </ul>
    </div>
    <div class="pagination-box wow" style="visibility: visible">
      <el-pagination
        class="wow"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
    <YueYu :visible="visible" @close-event = "closeDialog" />
  </div>
</template>

<script setup>
import YueYu from '../components/common/YueYu.vue'
import { ref } from 'vue'

const visible = ref(false)
const closeDialog = (e)=>{
  visible.value = e
}

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100) // 数据总条数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
// 页码改变时的处理函数
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  // 这里可以调用获取数据的方法，传入新的页码
}

import { Navigation, A11y } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'

const navigation = ref({
  nextEl: '.next1',
  prevEl: '.prev1'
})
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (page,id)=>{
  let data = {
    name:page,
  }
  if(id){
    data.query = {id:id}
  }
  router.push(data).then(()=>{
    window.scrollTo({
      top:0
    })
  })
}
const modules = ref([Navigation, A11y])
const onSlideChange = () => {}
</script>

<style>
design-list a {
  text-decoration: none;
}
.design-list .main > h3 {
  opacity: 0;
  animation: slide-up-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.design-list .main .content ul li {
  opacity: 0;
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}

.design-list .main .content ul li .top .topLeft {
  opacity: 0;
  animation: slide-left-in 2s, fade-in 2s;
  animation-fill-mode: forwards;
}

.design-list .main .content ul li .top .topRight {
  opacity: 0;
  animation: slide-right-in 2s, fade-in 2s;
  animation-fill-mode: forwards;
}

.design-list .main .content ul li .swiper {
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.design-list {
  background-color: #fff;
}

.design-list .main > h3 {
  padding: 0 0.3rem;
  font-size: 0.56rem;
  font-weight: 700;
  color: #000;
  margin-top: 0.99rem;
  display: flex;
  align-items: center;
}

.design-list .main > h3 span {
  display: inline-block;
  position: absolute;
  font-family: Gilroy-Medium;
  margin-right: 0.2rem;
  color: #dd292c;
}

.design-list .main > h3 span:nth-of-type(2) {
  position: static;
  display: inline-block;
  width: 1.25rem;
  height: 0.01rem;
}

.design-list .main .content ul li {
  padding-bottom: 0.8rem;
  padding-top: 1rem;
}

.design-list .main .content ul li:nth-of-type(2n) {
  background: #f3f3f3;
}

.design-list .main .content ul li:last-of-type {
  margin-bottom: 1rem;
}

.design-list .main .content ul li .top {
  padding: 0 0.3rem;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.design-list .main .content ul li .top .topLeft {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  flex-direction: column;
}

.design-list .main .content ul li .top .topLeft > div:first-of-type > p:first-of-type {
  font-size: 0.48rem;
  color: #000;
  line-height: 0.48rem;
  margin-bottom: 0.15rem;
}

.design-list .main .content ul li .top .topLeft > div:first-of-type > p:nth-of-type(2) {
  font-size: 0.28rem;
  color: #dd292c;
}

.design-list .main .content ul li .top .topLeft > div p:first-of-type {
  font-size: 0.22rem;
  color: #000;
}

.design-list .main .content ul li .top .topLeft > div p:nth-of-type(2) {
  font-size: 0.22rem;
  color: #999;
  margin-top: 0.05rem;
  width: 2.54rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-weight: 700;
  line-height: 0.4rem;
}

.design-list .main .content ul li .top .topLeft .button-wrap {
  margin-top: 0;
}

.design-list .main .content ul li .top .topRight {
  width: 4.1rem;
  height: 5rem;
}

.design-list .main .content ul li .top .topRight img {
  width: 100%;
  height: 100%;
}

.design-list .main .swiper {
  overflow: hidden;
}

.design-list .main .swiper .swiperTop {
  margin-top: 0.5rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  display: flex;
  position: relative;
  width: 6.9rem;
}

.design-list .main .swiper .swiperTop p {
  font-size: 0.32rem;
  color: #000;
  flex: 1;
}

.design-list .main .swiper .swiperTop > div {
  position: relative;
  width: 1.4rem;
}
.design-list .main .swiper .swiperTop > div .swiper-button-next,
.design-list .main .swiper .swiperTop > div .swiper-button-prev {
  border: none;
  outline: none;
  top: 0.3rem;
}
.swiper-button-prev, .swiper-button-next{
  color: #dd292c;
}
.design-list .main .swiper .swiperTop > div .swiper-button-next::after{
  font-size: 0.32rem;
  
}
.design-list .main .swiper .swiperTop > div .swiper-button-prev::after{
  font-size: 0.32rem;
}

.design-list .main .swiper .swiper-container {
  height: 2.8rem;
  padding-bottom: 0.3rem;
  padding-top: 0.38rem;
  padding-left: 0.3rem;
}

.design-list .main .swiper .swiper-container .swiper-wrapper {
  align-items: center;
}

.design-list .main .swiper .swiper-container .swiper-wrapper .swiper-slide .imgBox {
  box-shadow: 0 0.05rem 0.3rem 0 hsla(0, 0%, 42.4%, 0.35);
  width: 2.48rem;
  height: 1.77rem;
  position: relative;
  overflow: hidden;
  border-radius: 0.2rem;
  cursor: pointer;
}

.design-list .main .swiper .swiper-container .swiper-wrapper .swiper-slide .imgBox:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.1);
}

.design-list .main .swiper .swiper-container .swiper-wrapper .swiper-slide .imgBox img {
  width: 2.48rem;
  height: 1.77rem;
}

.design-list .main .swiper .swiper-container .swiper-wrapper .swiper-slide p {
  width: 2.48rem;
  font-size: 0.24rem;
  box-sizing: border-box;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.2rem;
  white-space: nowrap;
  text-align: center;
  margin-top: 0.08rem;
}

.design-list .main .pagination-box {
  margin-top: 0.15rem;
  padding: 0 0.3rem 1rem;
}

.design-list .main .pagination-box .el-pagination {
  padding: 0;
}
.year{
  font-size: .56rem !important;
  color: #dd292c !important;
}
</style>